import React, { useEffect, useState } from 'react'
import { Space, Table, Tag, Button, message ,Modal} from 'antd';
import { useNavigate,useLocation } from 'react-router-dom';
import ums from '../apis/ums'
import moment from 'moment/moment'
import ButtonAuth , {authModes}from './auth/components/buttonAuth';
export default function UserList() {
    const [ userid, setuserid] = useState('');
    function del(e){
        console.log(e._id);
        setuserid(e._id)
        setOpen(true)
       }
       const [open, setOpen] = useState(false);
       const [confirmLoading, setConfirmLoading] = useState(false);
       const [modalText, setModalText] = useState('是否永久删除');
       const handleOk = () => {
           setOpen(false);
            ums.delAccount({id:userid}).then(res=>{
            console.log(res);
            if(res.code==1){
                message.success("删除成功")
            }
        })
       };
       const handleCancel = () => {
         setOpen(false);
       };
    const columns = [
        {
            title: '账户名',
            dataIndex: 'account',
            key: 'account',
        },
        {
            title: '角色',
            dataIndex: 'userGroup',
            key: 'userGroup',
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          render:(date)=>{
            return moment(date).format("YYYY-MM-DD HH:mm:ss")
          }
        },
        {
            title: '操作',
            key: '_id',
            render: (text, record,_id) => (
                  <ButtonAuth auth={"del_account"} authMode={authModes.openOrDisabled}> 
                  <Button type='primary' danger onClick={()=>del(record)}>删除</Button>
                  </ButtonAuth>
            ),
        },
    ];
    const navigate = useNavigate();
    function addUser(){
        navigate('/NavPage/addUser')
    }
    function renders(params) {
        ums.getAccountList({
            // pageSize: 4,
            // pageNumber: 1,
        }).then(res => {
            console.log(res);
            setDatas([...res.data.data])

            
        })
    }
    const [data, setDatas] = useState([])
   React.useEffect(() =>{
      renders()
    }, [1])

    return (
        <div>
            <ButtonAuth auth={"add_account"} authMode={authModes.openOrDisabled}><Button  type='primary' onClick={addUser} >增加用户</Button></ButtonAuth>
             {/* <Button  type='primary' onClick={addUser} >增加用户</Button> */}
            <Table columns={columns} dataSource={data} rowKey={"_id"}/>
            <Modal
        title="Title"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <p>{modalText}</p>
      </Modal>
        </div>
    )
}
